<!DOCTYPE html>
<html lang="en">
<head>
    <head>
        <meta charset="UTF-8">
        <title>Face Search</title>
        {#    {% load static %}#}
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css"
              rel="stylesheet">
        <link rel="icon" type="image/png" sizes="192x192"
              href="/static/favicon.ico">
        <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
        <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.ie8polyfill.js"></script>
        <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.widgets.helper.js"></script>
        <style>
            pre code {
                background-color: #eee;
                border: 1px solid #999;
                display: block;
                padding: 20px;
            }
        </style>
    </head>
<body>

<h2 align="center" style="font-family: 'Times New Roman'">Face Search</h2>

<div align="center" style="border: 2px pink;">
    <h5 align="center" style="font-family: 'Times New Roman'">Upload your
        portrait image and search Top-10 MS students
        who are most similar to you</h5>
    <div align="center">
        <form enctype="multipart/form-data" style="width: 30%">{% csrf_token %}
            <div class="am-form-group am-form-file">
                <button type="button" class="am-btn am-btn-danger am-btn-block">
                    <i class="am-icon-cloud-upload"></i> Choose Image
                    <input type="file" placeholder="upload image" name="image">
                    {#                <input id="doc-form-file" type="file" multiple>#}
                </button>
            </div>

            <input type="button" value="Search" id='upload-btn'
                   class="am-btn am-btn-success am-btn-block"
                   onclick="search()">
        </form>
        <img class="am-img-responsive" alt="" src="" style="max-height: 320px;
    margin-top: 5px"/>
    </div>
    <h2 align="center" style="font-family: 'Times New Roman'">The people who
        look most similar to you</h2>
    <div id="faceArea"></div>
</div>

<footer style="text-align: center">
    Powered by <a href="index" target="_blank">XCloud</a>
    Supported by <a href="https://www.zhihu.com/people/xulu-0620/activities"
                    target="_blank">LucasX</a>
</footer>

<script>
    function search() {
        $('#upload-btn').attr("disabled", "disabled");
        var src = $("input[name='image']").val();
        var imgName = src.split("\\")[src.split('\\').length - 1];
        var data = new FormData($('form').get(0));

        $.ajax({
            url: 'facesearch',
            type: 'POST',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                $('#upload-btn').removeAttr('disabled');
                var result = eval('(' + data + ')');
                results = result.results;
                $('#time').text(result.elapse);
                $('img').attr('src', '../../../static/FaceUpload/' + imgName);
                $('code').text(JSON.stringify(result, null, 4));

                var htmlContent = '<div class=\"card\">';
                for (var i = 0; i < results.length; i++) {
                    var res = results[i];
                    htmlContent += '<img src=\../../../static/HZAU/' + res[0].slice(0, 4) + '/' + res[0].slice(4, 7) +
                        '/' + res[0] + '.jpg alt=\"' + res[0] + '\"/>' + '<p style="color: red">' + 'Student_No: ' +
                        res[0] + '; Similarity: ' + res[1].toFixed(4) * 100 + '%</p>';
                }
                htmlContent += '</div>';
                $("#faceArea").html(htmlContent);
            }
        });

        return false;
    }
</script>

</body>
</html>